<template>
<onekit-page>
<onekit-view onekit-class="container">
	<div is="onekit-template-head" :DATA="`${JSON.stringify({title:'音视频合成'})}`"></div>
	<onekit-view onekit-class="page-body">
		<onekit-view onekit-class="page-section">
			<onekit-view onekit-class="page-section-title">源视频</onekit-view>
		</onekit-view>
		<onekit-view onekit-class="page-section">
			<onekit-button type="primary" data-video="one" @Tap="handleChooseVideo">选择源视频1</onekit-button>
			<onekit-video v-if="one" :src="one"></onekit-video>
		</onekit-view>
		<onekit-view onekit-class="page-section">
			<onekit-button type="primary" data-video="two" @Tap="handleChooseVideo">选择源视频2</onekit-button>
			<onekit-video v-if="two" :src="two"></onekit-video>
		</onekit-view>
		<onekit-view onekit-class="btn-area">
			<onekit-button :disabled="!canIUse" type="primary" @Tap="handleExport">合成</onekit-button>
		</onekit-view>
		<template v-if="targetSrc">
			<onekit-view onekit-class="page-section">
				<onekit-view onekit-class="page-section-title">
					<onekit-text>合成视频</onekit-text>
				</onekit-view>
				<onekit-view onekit-class="page-section-title">
					<onekit-text>合成视频轨道为：源视频1视频轨道 + 源视频2音频轨道</onekit-text>
				</onekit-view>
			</onekit-view>
			<onekit-view onekit-class="page-section">
				<onekit-video :src="targetSrc"></onekit-video>
			</onekit-view>
		</template>
	</onekit-view>
	<div is="onekit-template-foot"></div>
</onekit-view>
</onekit-page></template>
<script>
/* eslint-disable */
import Vue from 'vue';
import onekit_template_0 from '../../../common/head.head.vue';Vue.component('onekit-template-head',onekit_template_0);
import onekit_template_1 from '../../../common/foot.foot.vue';Vue.component('onekit-template-foot',onekit_template_1);
const ONEKIT_JSON= {
  "navigationBarTitleText": "音视频合成",
  "usingComponents": {
    
  }
};
const ONEKIT_SJS = {
};
import wx from '../../../../weixin2vue/wx.js';
import Macro from '../../../../weixin2vue/Macro.js';
const {getApp,getCurrentPages} = Macro;
import Page from '../../../../weixin2vue/OnekitPage.js';
import Component from '../../../../weixin2vue/OnekitComponent.js';
export default Page(ONEKIT_JSON,["one","two","canIUse","targetSrc"],ONEKIT_SJS,{
    "onShareAppMessage"(){
      return {
        "title":'音视频合成',
        "path":'packageAPI/pages/media-container/media-container'
};
    },
    "onLoad"(){
      const canIUse = wx.canIUse('wx.createMediaContainer()');
      if(canIUse)
      {
        this.mediaContainer = wx.createMediaContainer();
      }
else
      {
        this.setData({
            "canIUse":false
});
        wx.showModal({
            "title":'微信版本过低，暂不支持本功能'
});
      };
    },
    "data":{
        "targetSrc":'',
        "one":'',
        "two":'',
        "canIUse":true
},
    "handleChooseVideo"(e){
      const that = this;
      wx.chooseVideo({
        "sourceType":[
          'album',
          'camera'
        ],
        "success"(res){
          console.log(res.tempFilePath);
          that.setData({
            [e.currentTarget.dataset.video]:res.tempFilePath
});
          if(e.currentTarget.dataset.video == 'one')
          {
            that.mediaContainer.extractDataSource({
                "source":that.data.one,
                "success"(mt){
                  that.mediaTrackOne = mt;
                }
});
          }
else
          {
            that.mediaContainer.extractDataSource({
                "source":that.data.two,
                "success"(mt){
                  that.mediaTrackTwo = mt;
                }
});
          };
        }
});
    },
    "handleExport"(){
      if((this.data.one == '') || this.data.two == '')
      {
        wx.showToast({
            "title":'请先选择源视频',
            "icon":"none"
});
      }
else
      {
        console.log(this.mediaTrackOne,this.mediaTrackTwo);
        const [trackMedia] = this.mediaTrackOne.tracks.filter((item)=>item.kind == 'video');
        const [trackAudio] = this.mediaTrackTwo.tracks.filter((item)=>item.kind == 'audio');
        console.log(trackMedia,trackAudio);
        this.mediaContainer.addTrack(trackMedia);
        this.mediaContainer.addTrack(trackAudio);
        const that = this;
        this.mediaContainer.export({
            "success":(res)=>{that.setData({
                "targetSrc":res.tempFilePath
})}
});
      };
    }
});

</script>
<style 
 lang="css">
.page-section {
  display: flex ;
  flex-direction: column ;
  align-items: center ;
}
</style>